<template>
	<view class="content">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in lunbolists" :key="index">
							<view class="swiper-item uni-bg-red">
								<image :src="item" class="swiper-image" mode="scaleToFill">
								</image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="line"></view>
			<view class="tip-title">
				工具
			</view>
		</view>
		<view class="gong">
			<uni-grid :column="4" :showBorder="false" :square="false" @change='click'>
				<uni-grid-item v-for="(item,index) in array" :key="index" :index="index">
					<view class="text-icon">
						<image :src="item.src" class="gong-iocn" :mode="item.mode"></image>
					</view>
					<text class="text">{{item.text}}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="line-line"></view>
		<view class="tip">
			<view class="line"></view>
			<view class="tip-title">
				查询
			</view>
		</view>
		<view class="gong">
			<uni-grid :column="4" :showBorder="false" :square="false" @change='click1'>
				<uni-grid-item v-for="(item,index) in array1" :key="index" :index="index">
					<view class="text-icon">
						<image :src="item.src" class="gong-iocn" :mode="item.mode"></image>
					</view>
					<text class="text">{{item.text}}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	import {
		checkLogin
	} from '@/core/app'
	import * as BannerApi from '@/api/banner'
	export default {
		data() {
			return {
				title: '首页',
				background: ['color1', 'color2', 'color3'],
				lunbolists: [
					"https://jianxia.mazhoudao.com/h5/static/home/banner.png",
				],
				array: [{
						mode: 'heightFix',
						text: '配装属性模拟',
						url: '/pages/index/peizhuang/index?type=0',
						src: '../../static/home/peizhuangmoni@2x.png'
					}, {
						mode: 'heightFix',
						text: '黄金装备鉴赏',
						url: '/pages/index/peizhuang/index?type=1',
						src: '../../static/home/peizhuangicon@2x.png'

					}, {
						mode: 'heightFix',
						text: '属性加点模拟',
						url: '/pages/index/peizhuang/index?type=2',
						src: '../../static/home/jiadianmoni@2x.png'
					}, {
						mode: 'heightFix',
						text: '加点大厅',
						url: '/pages/index/jiadian/list/index?type=2',

						src: '../../static/home/jiadianicon@2x.png'
					},
					{
						mode: 'heightFix',
						text: '技能加点模拟',
						url: '/pages/index/peizhuang/index?type=4',
						src: '../../static/home/jinengmoniicon@2x.png'
					},
					{
						mode: 'heightFix',
						text: '技能大厅',
						url: '/pages/index/jiadian/list/index?type=3',
						src: '../../static/home/jinengicon@2x.png'
					}
				],
				array1: [{
					mode: 'heightFix',
					text: '返点查询',
					url: '/pages/index/fandian/index',
					src: '../../static/home/backicon@2x.png'
				}, {
					mode: 'heightFix',
					text: '怪物分布查询',
					url: '/pages/index/guaiwu/index',
					src: '../../static/home/guaiwuicon@2x.png'
				}],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		created() {},
		onLoad() {
			// BannerApi.GetBanner({}, {
			// 		isPrompt: false
			// 	})
			// 	.then(response => {
			// 		const result = response.data
			// 		let lunbolist_temp = []
			// 		console.log(result)
			// 		for (let i=0;i<result.length;i++){
			// 			let item = result[i]
			// 			lunbolist_temp.push(item.src)
			// 		}
			// 		this.lunbolists = lunbolist_temp
			// 	})
			// 	.catch(reject=>{})
		},
		methods: {
			click(e) {
				console.log(e.detail.index)
				if (uni.getStorageSync('uid') === '') {
					uni.showModal({
						title: '友情提示',
						content: '尚未登录请登录。',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/me/index"
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: this.array[e.detail.index].url
					})
				}
			},
			click1(e) {
				console.log(e.detail.index)
				if (uni.getStorageSync('uid') === '') {
					uni.showModal({
						title: '友情提示',
						content: '尚未登录请登录。',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/me/index"
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: this.array1[e.detail.index].url
					})
				}

			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style scoped>
	.bottom {
		height: 100rpx;
		width: 100%;
	}

	.line-line {
		width: 100%;
		height: 1px;
		background: #D1D1D1;
		margin-top: 40rpx;
	}

	.gong {
		width: 90%;
		height: auto;
		margin-top: 30rpx;
		text-align: center;
	}

	.text-icon {
		margin-top: 10rpx;
	}

	.text {
		margin-top: 5rpx;
		font-size: 24rpx;
	}

	.gong .gong-iocn {
		margin-top: 20rpx;
		display: inline-block;
		width: 80rpx;
		height: 72rpx;
	}

	.tip {
		margin-top: 40rpx;
		width: 100%;
		height: 30px;
		float: left;
		display: flex;
	}

	.tip .line {
		margin-left: 5%;
		width: 6px;
		height: 30px;
		background: #4CD4EA;
		border-radius: 3px;
	}

	.tip .tip-title {
		margin-left: 11px;
		width: 62px;
		height: 29px;
		line-height: 30px;
		font-size: 36rpx;
		font-weight: 550;
		color: #000000;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.uni-padding-wrap {
		width: 90%;
		height: auto;
	}

	.swiper-item {
		height: 100%;
		width: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.uni-bg-red {
		border-radius: 10px;
		background-color: red;
	}

	.uni-bg-green {
		border-radius: 10px;
		background-color: green;
	}

	.uni-bg-blue {
		border-radius: 10px;
		background-color: blue;
	}
</style>
